<template>
  <div class="Thenewaddress">
    <div class="header">
      <div class="table">
        <div class="tuo">
          <div class="tuo-1">
            <div class="tuo-2"></div>
            <span>地址列表</span>
          </div>
          <div>
            <el-button
              @click="dialogVisible = true"
              size="mini"
              style="
                width: 96px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;
              "
              >新增
            </el-button>
          </div>
        </div>
        <!-- 新增地址 -->
        <div>
          <el-dialog
            title="会员信息查询-新增地址"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
            width="40%"
          >
            <div class="add">
              <div class="header-1">
                <div class="too-1-1">
                  <div class="too"></div>
                  <span>新增地址</span>
                </div>
              </div>
              <el-form
                style="margin-left: 20px"
                size="mini"
                :inline="true"
                :data="way"
                :model="way"
                class="pop"
              >
                <div class="pop-2">
                  <div class="pop-1">
                    <div class="pop-1-2">
                      <div class="pop-9">收货人</div>
                      <el-input
                        style="width: 120px"
                        size="mini"
                        v-model="way.consignee"
                        :options="options"
                        @change="handleChange"
                      ></el-input>
                    </div>
                  </div>
                  <div class="pop-1">
                    <div class="pop-1-2">
                      <div class="pop-9">手机号码</div>
                      <el-input
                        style="width: 120px"
                        v-model="way.phone"
                        size="mini"
                      ></el-input>
                    </div>
                  </div>
                </div>
                <div class="pop-1">
                  <div class="pop-1-2">
                    <div class="pop-9">标签</div>
                    <el-input
                      style="width: 120px"
                      size="mini"
                      v-model="way.label"
                      :options="options"
                      @change="handleChange"
                    ></el-input>
                  </div>
                </div>
                <div class="pop-1">
                  <div class="pop-1-2">
                    <div class="pop-8">所在地区</div>
                    <el-input
                      style="width: 368px"
                      v-model="way.region"
                    ></el-input>
                  </div>
                </div>
                <div class="pop-1">
                  <div class="pop-1-2">
                    <div class="pop-8">详细地址</div>
                    <el-input
                      :autosize="{ minRows: 12, maxRows: 12 }"
                      style="width: 368px"
                      v-model="way.detailedAddress"
                    ></el-input>
                  </div>
                </div>
                <div class="pop-3">
                  <el-button
                    @click="getbackInsertAddresses"
                    size="mini"
                    style="
                      width: 110px;
                      font-size: 10px;
                      color: #fff;
                      height: 30px;
                      background-color: #f6b23e;
                    "
                    >确定</el-button
                  >
                </div>
              </el-form>
            </div>
          </el-dialog>
        </div>
        <el-dialog
          title="确认删除该联常旅客吗"
          :visible.sync="Deletep"
          :before-close="handleClose"
          width="22%"
        >
          <div class="pop-3">
            <el-button
              @click="getbackDeleteAddresses"
              size="mini"
              style="
                width: 110px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;
              "
              >确定
            </el-button>
          </div>
        </el-dialog>
        <!-- 地址列表 -->
        <div class="tables">
          <el-table
            border
            :data="address"
            size="mini"
            :header-cell-style="{
              color: '#fff',
              background: '#6090EC',
              fontSize: '11px',
              fontWeight: 'normal',
            }"
            style="width: 100%"
          >
            <el-table-column prop="consignee" label="收货人" width="100">
            </el-table-column>
            <el-table-column prop="phone" label="手机号码"> </el-table-column>
            <el-table-column prop="label" label="标签 " width="95">
            </el-table-column>
            <el-table-column
              prop="whetherDefaultAddress"
              label="默认地址"
              width="95"
            >
              <template slot-scope="scope">
                <template v-if="scope.row.whetherDefaultAddress == 'true'"
                  >是</template
                >
                <template v-if="scope.row.whetherDefaultAddress == 'false'"
                  >否</template
                >
              </template>
            </el-table-column>
            <el-table-column prop="region" label="所在地区" width="230">
            </el-table-column>
            <el-table-column prop="detailedAddress" label="详细地址">
            </el-table-column>
            <el-table-column prop="name" label="操作" fixed="right" width="240">
              <template slot-scope="scope">
                <el-button
                  style="background-color: #6090ec; color: #fff"
                  size="mini"
                  @click="Modifythe(scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  style="background-color: #f6b23e; color: #fff"
                  @click="aaa = true"
                  >操作记录</el-button
                >
                <el-button
                  @click="Deletephone(scope.row)"
                  style="background-color: #ff0000; color: #fff"
                  size="mini"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 修改地址 -->
        <div>
          <el-dialog
            title="会员信息查询-修改地址"
            :visible.sync="xiugai"
            :before-close="handleClose"
            width="40%"
          >
            <div class="add">
              <div class="header-1">
                <div class="too-1-1">
                  <div class="too"></div>
                  <span>修改地址</span>
                </div>
              </div>
              <el-form
                style="margin-left: 20px"
                size="mini"
                :inline="true"
                :data="way"
                :model="way"
                class="pop"
              >
                <div class="pop-2">
                  <div class="pop-1">
                    <div class="pop-1-2">
                      <div class="pop-9">收货人</div>
                      <el-input
                        style="width: 120px"
                        size="mini"
                        v-model="way.consignee"
                        :options="options"
                        @change="handleChange"
                      ></el-input>
                    </div>
                  </div>
                  <div class="pop-1">
                    <div class="pop-1-2">
                      <div class="pop-9">手机号码</div>
                      <el-input
                        style="width: 120px"
                        v-model="way.phone"
                        size="mini"
                      ></el-input>
                    </div>
                  </div>
                </div>
                <div class="pop-1">
                  <div class="pop-1-2">
                    <div class="pop-9">标签</div>
                    <el-input
                      style="width: 120px"
                      size="mini"
                      v-model="way.label"
                      :options="options"
                      @change="handleChange"
                    ></el-input>
                  </div>
                </div>
                <div class="pop-1">
                  <div class="pop-1-2">
                    <div class="pop-8">所在地区</div>
                    <el-input
                      style="width: 368px"
                      v-model="way.region"
                    ></el-input>
                  </div>
                </div>
                <div class="pop-1">
                  <div class="pop-1-2">
                    <div class="pop-8">详细地址</div>
                    <el-input
                      :autosize="{ minRows: 12, maxRows: 12 }"
                      style="width: 368px"
                      v-model="way.detailedAddress"
                    ></el-input>
                  </div>
                </div>
                <div class="pop-3">
                  <el-button
                    @click="getbackInsertAddresses"
                    size="mini"
                    style="
                      width: 110px;
                      font-size: 10px;
                      color: #fff;
                      height: 30px;
                      background-color: #f6b23e;
                    "
                    >确定</el-button
                  >
                </div>
              </el-form>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Thenewaddress",
  // 父子传递参数
  props: ["MembershipInformationData"],
  data() {
    return {
      // 新增
      way: {
        consignee: "",
        phone: "",
        region: "",
        detailedAddress: "",
        label: "",
      },
      address: [],
      dialogVisible: false,
      formLabelAlign: {
        name: "",
        checked: true,
      },
      radio: 3,
      xiugai: false,
      checked: false,
      Deletep: false,
      sizeForm: {
        name: "",
        region: "",
      },
    };
  },
  methods: {
    Modifythe(row) {
      this.xiugai = true;
    },
    // 列表
    getbackSelectAddresses() {
      this.$axios.getbackSelectAddresses({}).then((res) => {
        console.log(res);
        if (res.code == "200") {
          // 工单列表数据
          this.address = res.data;
          console.log(this.address);
        }
      });
    },
    // 新增地址
    getbackInsertAddresses() {
      this.dialogVisible = false;
      this.$axios
        .getbackInsertAddresses({
          consignee: this.way.consignee,
          phone: this.way.phone,
          region: this.way.region,
          detailedAddress: this.way.detailedAddress,
          label: this.way.label,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.$message({
              message: "新增成功",
              type: "success",
            });
          }
        });
    },
    // 修改地址
    getbackInsertAddresses() {
      this.xiugai = false;
      this.$axios
        .getbackInsertAddresses({
          consignee: this.way.consignee,
          phone: this.way.phone,
          region: this.way.region,
          detailedAddress: this.way.detailedAddress,
          label: this.way.label,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.$message({
              message: "修改成功",
              type: "success",
            });
          }
        });
    },
    Deletephone(row) {
      this.Deletep = true;
      this.commonAddresserId = row.commonAddresserId;
      console.log(this.commonAddresserId);
    },
    // 删除地址
    getbackDeleteAddresses() {
      this.Deletep = false;
      this.$axios
        .getbackDeleteAddresses({
          commonAddresserId: this.commonAddresserId,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
        });
    },
    onSubmit() {
      console.log("submit!");
    },
    handleChange(value) {
      console.log(value);
    },
  },
  mounted() {
    this.getbackSelectAddresses();
  },
};
</script>
<style scoped>
.Thenewaddress {
  height: 100%;
  background-color: #f7f7f7;
}
.tuo {
  font-weight: bolder;
  display: flex;
  justify-content: space-between;
  margin-right: 20px;
  margin-top: 20px;
}
.tuo-1 {
  display: flex;
}
.tuo-2 {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  font-size: 12px;
  margin-bottom: 25px;
}
.table {
  padding-left: 20px;
  padding-right: 20px;
}
.tabs {
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 20px;
}
.tables {
  margin-top: 10px;
  display: flex;
  /* justify-content:space-between; */
}
.tables-1 {
  margin-right: 10px;
  width: 40%;
}
.tables-2 {
  width: 60%;
}
/* .add {
  width: 642px;
  height: 326px;
  background-color: #fff;
  border: 1px solid #c4c4c4;
} */
.pop-9 {
  font-size: 11px;
  width: 60px;
  padding-top: 5px;
}
.pop-8 {
  font-size: 11px;
  width: 60px;
  padding-top: 10px;
}
.pop {
  margin-left: 20px;
}
.pop-1 {
  display: flex;
  width: 250px;
}
.pop-1-2 {
  display: flex;
  margin-bottom: 12px;
  margin-right: 10px;
}
.pop-2 {
  display: flex;
}
.pop-3 {
  margin-left: 10px;
  margin-top: 20px;
}
.too-1-1 {
  display: flex;
  margin-left: 20px;
  /* padding-top: 20px; */
  font-size: 20px;
}
.too {
  width: 3.5px;
  height: 22px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  margin-bottom: 25px;
}
.lan {
  margin-top: 5px;
  color: #2f80ed;
  font-size: 11px;
}
</style>
